<template>
  <div class="approvalContainer" v-loading.fullscreen.lock="fullscreenLoading"
    element-loading-background="rgba(0, 0, 0, 0.8)" element-loading-text="接口请求中...">
    <div class="screenComp">
      <!-- 镇级菜单 -->
      <template v-if="pageType == 1 || pageType == 2 || pageType == 3">
        <Screen :pageType="pageType" @changeMonthTime="changeMonthTime" @keyWordInput="keyWordInput"
          @resetFrom="resetFrom" layout="keyword, monthTime, reset">
        </Screen>
      </template>
      <!-- 村级/社区/居委其他菜单 -->
      <template v-else>
        <Screen :pageType="pageType" @changeMonthTime="changeMonthTime" @keyWordInput="keyWordInput"
          @resetFrom="resetFrom" layout="keyword, one, two, monthTime, reset, shrink" @changeTwo="changeTwo"
          @changeOne="changeOne">
        </Screen>
      </template>
    </div>
    <div class="approvalFlex" v-loading="auditSizeLoading || auditListLoading">
      <div class="approvalTabs">
        <div class="editBulkBox">

          <div class="btn success" v-if="isBulk" @click="bulkSelectAll">{{ selectContAll == true ? '取消全选' : '全选' }}</div>
          <div class="btn success" v-if="isBulk" @click="agreePassAudit(1)">全部通过</div>
          <div class="btn warning" v-if="isBulk" @click="openRefuseAuditWin">全部驳回</div>
          <div class="plEdit" v-if="currentTabIndex == 0" @click="openBulkOperation">{{ isBulk ? '取消批量' : '批量操作' }}</div>
        </div>
        <el-tabs class="demo-tabs" @tab-change="changeTabs">
          <el-tab-pane>
            <template #label>
              <span class="custom-tabs-label">
                <span class="tableCol">待办</span>
                <div class="tableTips bgCol1">
                  {{ waitSize > 99 ? '99+' : (waitSize || 0) }}
                </div>
              </span>
            </template>
          </el-tab-pane>
          <el-tab-pane>
            <template #label>
              <span class="custom-tabs-label">
                <span class="tableCol">已处理</span>
                <!-- <div class="tableTips bgCol5">
                  {{ waitSize > 99 ? '99+' : (waitSize || 0) }}
                </div> -->
              </span>
            </template>
          </el-tab-pane>
          <div class="tabContent">
            <el-row :gutter="16">
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6" v-for="(item, index) in auditList" :key="index">
                <div class="tabItem">
                  <div class="markEditBox" v-if="isBulk" @click="editSelectCont(item, index)">
                    <img class="ppppppimg" v-if="item.isSelectCot" src="../../../assets/image/选中.png" alt="">
                    <img class="ppppppimg" v-if="!item.isSelectCot" src="../../../assets/image/未选中.png" alt="">
                  </div>
                  <div class="tabHead">
                    <img :src="item.avatar" alt="" />
                    <div class="tabText">
                      <p class="p1">{{ item.username }}</p>
                      <p class="p2 line-1">{{ item.financeTitle || item.title }}</p>
                    </div>
                  </div>
                  <!-- <div class="amount">
                     <div class="am1">{{ item.areaType == 1 ? '资产' : '借' }}:￥{{ priceFormat(item.borrowTotalMoney) }}</div>
                    <div class="am2">{{ item.areaType == 1 ? '负/净' : '贷' }}:￥{{ priceFormat(item.loanTotalMoney) }}</div> 
                  </div>-->
                  <div class="progress">
                    <div class="progressTxt">
                      <div class="progressA">
                        待审进度：
                        <span :class="item.plan == '驳回' ? 'stsCol3' : ''">{{ item.plan }}</span>
                        <!-- <div @mouseover="mousePopover(item, index)">
                          <el-popover :show-arrow="false" :width="200" popper-style="borderColor:#2C83E4;padding: 20px;">
                            <template #reference>
                              <span>{{ item.plan }}</span>
                            </template>
                            <template #default>
                              <TimeLine :progressData="item.progressArr"></TimeLine>
                            </template>
                          </el-popover>
                        </div> -->
                      </div>
                      <p v-if="item.createTime">{{ formatDate(item.createTime, 'yyyy-MM-dd hh:mm') }}</p>
                      <p>{{ item.name }}</p>
                    </div>
                    <div class="btn btnis0" v-if="currentTabIndex == 0" @click="gotoJournaling(item.id)">立即审批</div>
                    <div class="btn btnis2" v-if="currentTabIndex == 1" @click="gotoJournaling(item.id)">查看报表</div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <div class="noList" v-if="!auditList.length && !auditListLoading">
              <img src="@/assets/image/noData1.png" />
              <div class="textTip">暂时没有报表信息</div>
            </div>

            <div v-if="currentTabIndex == 1" class="pagination" style="borderTop: 2px solid #F3F4F8;">
              <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="totalSize"
                @size-change="getHandleSizeChange" @current-change="getCurrentChange" v-model:page-size="currentLimit"
                :page-sizes="[9, 18, 36, 72]" />
            </div>
          </div>
        </el-tabs>
      </div>
    </div>

    <!-- 拒绝理由弹出 -->
    <el-dialog :close-on-click-modal="false" v-model="refuseAuditVisible" title="拒绝理由" width="40%">
      <el-form label-width="100px">
        <el-form-item label="拒绝理由: ">
          <el-input type="textarea" :rows="5" show-word-limit maxlength="255" placeholder="请输入拒绝理由" style="width: 90%"
            v-model="refuseMsg"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="refuseAuditVisible = false">取消</el-button>
          <el-button type="primary" @click="agreePassAudit(0)"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import Screen from '@/components/Screen.vue'
import TimeLine from '@/components/TimeLine.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
  components: {
    Screen,
  },
  props: ['pageType'],
  data() {
    return {
      fullscreenLoading: false,
      isBulk: false,
      auditSizeLoading: false,
      auditListLoading: false,
      refuseAuditVisible: false,
      selectContAll: false,
      refuseMsg: '',
      currentTabIndex: 0,
      journTypeArr: {
        '-1': '草稿',
        '0': '审核中',
        '1': '已通过',
        '2': '已拒绝',
        '3': '已通过',
      },
      tabTypeJoin: {    // 0 (待办)，1(完成) ，2(驳回)
        0: 0,
        1: 2,
        2: 1,
      },
      progressOutTime: null,
      waitSize: '',
      auditList: [],
      cunData1: {},
      sheData1: {},
      searchForm1: {
        page: 1,
        limit: 2000,
        title: '',
        monthTime: '',
        contentType: '',
        areaType: '',
        fromToAreaIds: '',
        isAlreadyProcess: 0,
      },
      searchForm2: {
        page: 1,
        limit: 2000,
        keyword: '',
        month: '',
        areaType: '',
        fromToArealds: '',
        reportType: '',
        isAlreadyProcess: 0,
      },
      totalSize: 0,
      currentLimit: 9,
      selectBlJson: [],
    }
  },
  mounted() {
    this.findFinanceListAndSizeByReq()
  },
  methods: {
    // 分页切换
    getHandleSizeChange(e) {
      this.currentLimit = e
      this.findFinanceListAndSizeByReq(e, 'limit')
    },
    getCurrentChange(e) {
      this.findFinanceListAndSizeByReq(e, 'page')
    },

    // 状态tab切换
    changeTabs(e) {

      this.selectBlJson = []
      this.selectContAll=false
      this.currentTabIndex = e
      this.isBulk = false
      this.searchForm1.limit = this.currentLimit
      this.searchForm2.limit = this.currentLimit
      this.findFinanceListAndSizeByReq(1, 'page')
    },

    // 三资和财务列表 / 政务-党务列表
    findFinanceListAndSizeByReq(e, tp = '') {
      if (this.currentTabIndex == 0) {
        this.searchForm1.page = 1
        this.searchForm2.page = 1
        this.searchForm1.limit = 2000
        this.searchForm2.limit = 2000
      } else {
        if (tp == 'limit') {
          this.searchForm1.limit = e
          this.searchForm2.limit = e
        } else if (tp == 'page') {
          this.searchForm1.page = e
          this.searchForm2.page = e
        }
      }

      this.auditListLoading = true
      if (this.pageType == 1 || this.pageType == 2 || this.pageType == 4 || this.pageType == 5) {
        // 政务-党务
        let pTypeArr = { 1: 1, 2: 2, 4: 3, 5: 4 }
        this.searchForm1.contentType = pTypeArr[this.pageType]
        this.searchForm1.pageType = this.pageType < 3 ? 1 : 2
        this.searchForm1.isAlreadyProcess = this.currentTabIndex
        this.$http.post('/axh/news/audit-news-table', this.searchForm1).then((res) => {
          if (res && res.result) {
            if (res.result.lists) {
              this.auditList = res.result?.lists.map((it) => {
                it.isSelectCot = false
                return it
              })
            } else {
              this.auditList = []
            }
            if (this.currentTabIndex == 0) {
              this.waitSize = res.result?.totalSize || 0
            } else {
              this.totalSize = res.result?.totalSize || 0
            }
            this.auditListLoading = false
          }
        })
      } else {
        // 三资 - 财务
        let pTypeArr = { 3: 4, 6: 4, 7: 1, 8: 2, 9: 3, }
        this.searchForm2.reportType = pTypeArr[this.pageType]
        this.searchForm2.areaType = (this.pageType == 1 || this.pageType == 2 || this.pageType == 3) ? 2 : this.searchForm2.areaType
        this.searchForm2.pageType = this.pageType == 3 ? 1 : 2
        this.searchForm2.isAlreadyProcess = this.currentTabIndex
        this.$http.post('/axh/find-finance-audit-table', this.searchForm2).then((res) => {
          if (res && res.result) {
            if (res.result.lists) {
              this.auditList = res.result?.lists.map((it) => {
                it.copyStatus = it.currentStatus
                it.isSelectCot = false
                return it
              })
            } else {
              this.auditList = []
            }
            if (this.currentTabIndex == 0) {
              this.waitSize = res.result?.totalSize || 0
            } else {
              this.totalSize = res.result?.totalSize || 0
            }
            this.auditListLoading = false
          }
        })
      }
    },


    // 是否开启批量操作
    openBulkOperation() {
      this.isBulk = !this.isBulk
      if (this.isBulk) return
      this.auditList = this.auditList.map((it) => {
        it.isSelectCot = false
        return it
      })
      this.selectBlJson = []
    },
    // 单个选中/未选中
    editSelectCont(item, index) {
      this.auditList[index].isSelectCot = !this.auditList[index].isSelectCot
      this.selectBlJson = this.auditList.filter((it) => {
        return it.isSelectCot == true
      })
      this.selectContAll = this.selectBlJson.length == this.auditList.length ? true : false
    },
    // 全选/取消全选
    bulkSelectAll() {
      this.selectContAll = !this.selectContAll
      this.auditList = this.auditList.map((it) => {
        it.isSelectCot = this.selectContAll
        return it
      })
      // 全部未选中 和 全部选中赋值
      if (this.selectContAll) {
        this.selectBlJson = this.auditList
      } else {
        this.selectBlJson = []
      }
    },
    // 打开拒绝弹出
    openRefuseAuditWin() {
      if (this.selectBlJson.length <= 0) {
        ElMessage.error('请选择需要审批的内容')
        return
      }
      this.refuseMsg = ''
      this.refuseAuditVisible = true
    },
    // 同意拒绝报表审核 1同意 0拒绝
    agreePassAudit(type) {
      if (type == 1) {
        if (this.selectBlJson.length <= 0) {
          ElMessage.error('请选择需要审批的内容')
          return
        }
        ElMessageBox.confirm('是否全部通过审核?', '警告', {
          confirmButtonText: '通过',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.batchAgreeApiAll(type)
        })
      } else {
        if (!this.refuseMsg) {
          ElMessage.error('请输入拒绝理由')
          return
        }
        this.batchAgreeApiAll(type)
      }
    },
    // 批量审批执行接口
    batchAgreeApiAll(type) {
      this.fullscreenLoading = true
      let idArr = this.selectBlJson.map((item) => {
        return item.id
      }).join(',')
      if (this.pageType == 1 || this.pageType == 2 || this.pageType == 4 || this.pageType == 5) {
        this.agreePassAuditApi2(type, idArr)
      } else {
        this.agreePassAuditApi1(type, idArr)
      }
    },
    // 同意拒绝报表审核 接口调用  报表审核
    agreePassAuditApi1(type, id) {
      this.$http.post('/axh/finance-audit', {
        ids: id,
        isConsent: type,
        failMsg: this.refuseMsg
      }).then((res) => {
        if (res && res.result) {
          this.refuseAuditVisible = false
          this.fullscreenLoading = false
          ElMessage.success('操作成功')
          this.findFinanceListAndSizeByReq()
        }
      })
    },
    // 同意拒绝报表审核 接口调用 文章审核
    agreePassAuditApi2(type, id) {
      this.$http.post('/axh/news/audit-news', {
        newsIds: id,
        isConsent: type,
        failMsg: this.refuseMsg
      }).then((res) => {
        if (res && res.result) {
          this.refuseAuditVisible = false
          this.fullscreenLoading = false
          ElMessage.success('操作成功')
          this.findFinanceListAndSizeByReq()
        }
      })
    },


    // 前往立即审批页
    gotoJournaling(id) {
      if (this.pageType == 1 || this.pageType == 2 || this.pageType == 4 || this.pageType == 5) {
        this.$router.push({ path: '/finance/journaling2', query: { fromTo: 'articleListAudit', id: id, pageType: this.pageType, btnShowType: 1 } })
      } else {
        this.$router.push({ path: '/finance/journaling', query: { fromTo: 'approval', id: id, pageType: this.pageType } })
      }
    },

    // 查询审核进度
    mousePopover(item, index) {
      if (this.progressOutTime != null) {
        clearTimeout(this.progressOutTime)
      }
      if (!item.id) return
      this.progressOutTime = setTimeout(() => {
        if (item.progressArr && item.progressArr.length > 0) return
        this.$http.post('/axh/findFinanceAuditLog', { id: item.id })
          .then((res) => {
            if (res && res.result) {
              this.auditList[index].progressArr = res.result
            }
          })
      }, 1000)
    },

    // 查询审核进度
    getFindAuditTotal(type) {
      this.$http
        .post('/axh/findAuditTotal', {
          areaType: type,
        })
        .then((res) => {
          if (res && res.result) {
            if (type == 1) {
              this.sheData1 = res.result
            } else {
              this.cunData1 = res.result
            }
          }
        })
    },
    // 重置
    resetFrom() {
      this.searchForm1.title = ''
      this.searchForm1.monthTime = ''
      this.searchForm1.areaType = ''
      this.searchForm1.fromToAreaIds = ''

      this.searchForm2.keyword = ''
      this.searchForm2.month = ''
      this.searchForm2.areaType = ''
      this.searchForm2.fromToAreaIds = ''
      this.findFinanceListAndSizeByReq()
    },
    // 筛选关键字搜索
    keyWordInput(value) {
      this.searchForm2.keyword = value.value
      this.searchForm1.title = value.value
      this.findFinanceListAndSizeByReq()
    },
    // 筛选时间月份框
    changeMonthTime(value) {
      this.searchForm2.month = value.value
      this.searchForm1.monthTime = value.value
      this.findFinanceListAndSizeByReq()
    },
    // 筛选tab2
    changeTwo(value) {
      this.searchForm2.fromToAreaIds = value.id < 0 ? '' : value.id
      this.searchForm1.fromToAreaIds = value.id < 0 ? '' : value.id
      this.findFinanceListAndSizeByReq()
    },
    // 筛选tab1
    changeOne(value) {
      this.searchForm2.fromToAreaIds = ''
      this.searchForm1.fromToAreaIds = ''
      this.searchForm2.areaType = value.id < 0 ? '' : value.id
      this.searchForm1.areaType = value.id < 0 ? '' : value.id
      this.findFinanceListAndSizeByReq()
    },


    // 查询财务审批数量
    // findAuditFinanceSize() {
    //   this.auditSizeLoading = true
    //   this.$http.post('/axh/findAuditFinanceSize', this.searchForm2).then((res) => {
    //     if (res && res.result) {
    //       this.auditSizeLoading = false
    //       this.auditSize = res.result
    //     }
    //   })
    // },
  },
}
</script>


<style lang="scss" scoped>
.approvalContainer {
  padding: 20px;

  .screenComp {
    background-color: $bgColorFFFFFF;
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: 5px;
  }

  .approvalFlex {
    display: flex;
    position: relative;

    .approvalTabs {
      position: relative;
      margin-bottom: 20px;
      flex: 1;
      width: 0;
      margin-right: 20px;

      .editBulkBox {
        display: flex;
        position: absolute;
        top: -8px;
        right: 0;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        z-index: 9;

        .plEdit {
          width: 108px;
          height: 40px;
          line-height: 40px;
          font-size: 15px;
          text-align: center;
          color: #fff;
          font-weight: 600;
          background-color: #3fb915;
          border-radius: 5px;
          cursor: pointer;
        }

        .btn {
          height: 40px;
          width: 108px !important;
          padding: 0;
          line-height: 40px;
          margin-right: 12px;
        }
      }


      .tabContent {
        width: 100%;

        .tabItem {
          width: 100%;
          height: 169px;
          background: $bgColorFFFFFF;
          border-radius: 6px;
          padding: 16px;
          margin-right: 16px;
          margin-bottom: 18px;
          position: relative;

          .markEditBox {
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.7);
            position: absolute;
            top: 0;
            left: 0;
            cursor: pointer;
            padding: 16px;
            z-index: 9;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;

            .ppppppimg {
              float: right;
              width: 28px;
              height: 28px;
            }
          }

          .tabHead {
            display: flex;
            margin-bottom: 10px;

            img {
              width: 56px;
              height: 56px;
              border-radius: 50%;
              margin-right: 10px;
            }

            .tabText {
              color: $color35353F;
              font-size: 16px;
              flex: 1;
              width: 0;

              .p1 {
                font-weight: 600;
                margin-bottom: 6px;
              }

              .p2 {
                width: 100%;
              }
            }
          }

          .amount {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            padding: 6px 0;

            .am1 {
              color: $colorF05E5E;
            }

            .am2 {
              color: $color3F9005;
            }
          }

          .progress {
            display: flex;
            justify-content: space-between;
            width: 100%;
            border-top: 1px solid $bdColorD8D8D8;
            padding-top: 16px;

            .progressTxt {
              line-height: 20px;
              color: $color9E9E9E;
              font-size: 12px;

              .progressA {
                display: flex;
                color: $color35353F;
                margin-bottom: 2px;
                font-size: 14px;

                span {
                  position: relative;
                  color: $color2C83E4;
                  // cursor: pointer;
                  line-height: 20px;

                  &::after {
                    content: '';
                    position: absolute;
                    bottom: 1px;
                    left: 0;
                    width: 100%;
                    height: 1px;
                    background-color: $color2C83E4;
                  }
                }
              }
            }

            .btnis0 {
              width: 78px;
              height: 40px;
              background-color: $bgColorE2EBFD;
              color: $color2C83E4;
            }

            .btnis1 {
              width: 78px;
              height: 40px;
              background: #fde2e2;
              color: #f05e5e;
            }

            .btnis2 {
              width: 78px;
              height: 40px;
              background: #d9d9d9;
              color: #8d8d8d;
            }
          }
        }
      }

      .custom-tabs-label {
        display: flex;
        align-items: center;

        .tableCol {
          font-size: 16px;
          margin-right: 8px;
        }

        .tableTips {
          display: inline-block;
          border-radius: 20px;
          padding: 0 5px;
          font-size: 12px;
          height: 17px;
          line-height: 18px;
          color: $colorFFFFFF;
          transform: translateY(-1px);
        }
      }
    }
  }
}
</style>